// components/combine-chart/combine-chart.js
import chart_data from '../../libs/data_chart'

Component({
  properties: {

  },
  data: {
    com_data: [{
      date: '2019/11/10',
      carNum: 4,
      personNum: 380
    }]
  },
  ready: function (params) {
    this.initCombineChart()
  },
  methods: {
    initCombineChart(params) {
      this.chartComponent = this.selectComponent('#combine-chart');
      this.chartComponent.init((canvas, width, height, F2) => {
        //此处data数据可通过 异步获取数据
        const chart = new F2.Chart({
          el: canvas,
          width,
          height,
          appendPadding: [15, 15, 15, 15]
        });
        this.initChartData(chart)
        this.initLinePoint(chart)
        this.initToolTip(chart)
        this.initLegend(chart)
        chart.render();
        this.setDefaultToolTip(chart)
        return chart;
      })
    },
    //设置数据
    initChartData(chart) {
      const com_data = chart_data.com_data_m
      console.log(com_data[0])
      chart.interaction('pan');
      var length = com_data.length,
        tickCount = length > 8 ? 8 : length,
        min = com_data[0].dateNum,
        max = com_data[tickCount - 1].dateNum;
      tickCount = tickCount <= 1 ? null : tickCount
      // console.log(min, max)
      chart.source(com_data, {
        dateNum: {
          range: [0.05, 0.95],
          tickCount: tickCount,
          min: min,
          max: max,
          formatter: function formatter(val) {
            var valStr = val.toString().replace('2019', '')
            valStr = valStr.slice(0, 2) + '-' + valStr.slice(2)
            return valStr;
          }
        },
        personNum: {
          min: 0
        },
        carNum: {
          min: 0
        }
      });
      // 定义进度条
      chart.scrollBar({
        mode: 'x',
        xStyle: {
          offsetY: -5
        }
      });
    },
    //设置线条和点
    initLinePoint(chart) {
      chart.interval().position('dateNum*personNum').color('#DBF6F4');
      chart.line().position('dateNum*carNum').color('#FDCD95').shape('line');
      chart.point().position('dateNum*carNum').style('type', {
        lineWidth: 3,
        fill: '#FDB969',
        stroke: '#FDB969'
      });
    },
    //设置提示文本
    initToolTip(chart) {
      chart.tooltip({
        showTitle: true,
        showCrosshairs: true, //是否显示辅助线
        showItemMarker: true, //显示图例里面的颜色
        showTooltipMarker: false, //没看到效果
        layout: 'vertical',
        background: {
          radius: 3,
          fill: 'gray',
          padding: [3, 5]
        },
        titleStyle: {
          fontSize: 13,
          fill: '#fff',
          textAlign: 'start',
          textBaseline: 'top'
        },
        onShow(ev) {
          const {
            items
          } = ev;
          // console.log("onShow", ev)
          items.splice(2, 1); // 去掉最后两项
          items[0].name = "发车"
          items[0].value = items[0].value + '量'
          items[1].name = "载客"
          items[1].value = items[1].value + "人"
        }
      });
    },
    initLegend(chart) {
      const legendItems = [{
        name: '发车班次',
        marker: {
          symbol: 'square',
          fill: '#FDCD95',
          radius: 5
        }
      }, {
        name: '载客量',
        marker: {
          symbol: 'square',
          fill: '#2CBBB3',
          radius: 5
        }
      }];
      chart.legend({
        custom: true,
        position: 'top',
        align: 'right',
        itemWidth: 60,
        offsetY: 12,
        items: legendItems
      })
    },
    //设置默认选中提示文本
    setDefaultToolTip(chart) {
      const item = {
        date: '2019/11/14',
        carNum: 6,
        personNum: 570,
        dateNum: 20191114
      };
      const point = chart.getPosition(item);
      chart.showTooltip(point);
    }
  }
})